import { Tag, Tooltip } from '@arco-design/web-react';
import { IconCopy } from '@arco-design/web-react/icon';
import { DictData } from '../types';
import { findTagColor } from '../utils/utils';
import CopyToClipboard, { copyToClipboard } from './copyToClipboard';

/** 文字带省略号，带气泡提示，有最大宽度 默认40，能复制 */
export function tooltipEllipsis(v: any, tips?: any) {
  return ellipsis(v, 'maxw-40', tips);
}
/** 文字带省略号，带气泡提示，有最大宽度 默认60，能复制 */
export function tooltipEllipsis60(v: any, tips?: any) {
  return ellipsis(v, 'maxw-60', tips);
}
/** 文字带省略号，带气泡提示，有最大宽度 默认80，能复制 */
export function tooltipEllipsis80(v: any, tips?: any) {
  return ellipsis(v, 'maxw-80', tips);
}
/** 文字带省略号，带气泡提示，有最大宽度 默认100，能复制 */
export function tooltipEllipsis100(v: any, tips?: any) {
  return ellipsis(v, 'maxw-100', tips);
}
/** 文字带省略号，带气泡提示，有最大宽度 默认120，能复制 */
export function tooltipEllipsis120(v: any, tips?: any) {
  return ellipsis(v, 'maxw-120', tips);
}
/** 文字带省略号，带气泡提示，有最大宽度 默认140，能复制 */
export function tooltipEllipsis140(v: any, tips?: any) {
  return ellipsis(v, 'maxw-140', tips);
}
/** 文字带省略号，带气泡提示，有最大宽度 默认160，能复制 */
export function tooltipEllipsis160(v: any, tips?: any) {
  return ellipsis(v, 'maxw-160', tips);
}
function ellipsis(v: any, clssName?: string, tips?: any) {
  return (
    <Tooltip content={tips ?? v}>
      <div onClick={() => copyToClipboard(tips ?? v)} className={`${clssName ?? 'maxw-40'} omit-text cursor-pointer`}>
        {v}
      </div>
    </Tooltip>
  );
}

/** 获取字典文字描述 */
export function dictLabel(v: any, list?: DictData[]) {
  let _r = (list ?? []).find((i) => (i.dictValue ?? '').toString() === (v ?? '').toString());
  return _r?.dictLabel ?? '';
}

/** 字典内容显示TAG */
export function dictTag(v: any, list?: DictData[], bordered?: boolean) {
  let _r = (list ?? []).find((i) => (i.dictValue ?? '').toString() === (v ?? '').toString());
  if (!_r) return null;
  return (
    <Tag key={v} bordered={bordered} color={findTagColor(_r?.listClass)}>
      {_r?.dictLabel}
    </Tag>
  );
}
/** 显示复制TAG并可以复制 */
export function tagCopy(v?: any, label?: string) {
  return (
    <CopyToClipboard key={v} text={v ?? ''}>
      <Tooltip position="top" content={v}>
        <Tag bordered color="lime" className="cursor-pointer">
          {label ?? '复制'}
        </Tag>
      </Tooltip>
    </CopyToClipboard>
  );
}
/** 不显示复制TAG并可以复制 */
export function tagCopyNoTip(v?: any, label?: string) {
  return (
    <CopyToClipboard key={v} text={v ?? ''}>
      <Tag bordered color="lime" className="cursor-pointer">
        {label ?? '复制'}
      </Tag>
    </CopyToClipboard>
  );
}
/** 显示复制Icon并可以复制 */
export function iconCopy(v?: any) {
  return (
    <CopyToClipboard key={v} text={v ?? ''}>
      <Tooltip position="top" content={v}>
        <IconCopy className="cursor-pointer text-primary-color" />
      </Tooltip>
    </CopyToClipboard>
  );
}
/** 保持原样并提示可复制 */
export function keepCopy(v?: any) {
  return (
    <CopyToClipboard key={v} text={v ?? ''}>
      <Tooltip content="点击复制">
        <span className="cursor-pointer">{v}</span>
      </Tooltip>
    </CopyToClipboard>
  );
}

/** 自定义按钮内容并可以复制 */
export function tagCopyBtn(v?: any, name?: string) {
  return (
    <CopyToClipboard key={v} text={v ?? ''}>
      <Tooltip position="top" content="点击复制">
        <Tag bordered color="#476BF5" className="cursor-pointer">
          {name}
        </Tag>
      </Tooltip>
    </CopyToClipboard>
  );
}

/** 带彩色圆点的字典内容 */
export function colorDotStatus(v: any, list?: DictData[]) {
  let _r = (list ?? []).find((i) => (i.dictValue ?? '').toString() === (v ?? '').toString());
  if (!_r) return null;
  return (
    <div className="d-flex-r ai-center">
      <div className={`bg-${findTagColor(_r.listClass)}-color w-8 h-8 border-radius-8 mr-8`}></div>
      <div>{_r.dictLabel}</div>
    </div>
  );
}
